<template>
  <div class="home">
    <!-- 头部 -->
    <header>
      <div class="header_img">测试1</div>
    </header>
    <!-- 内容 -->
    <div class="content">
      <div>
        <right></right>
      </div>
      <div>
        <middle></middle>
      </div>
      <div>
        <left></left>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive,onMounted } from "vue";
import request from "@/untils/request1";
import left from "./left";
import right from "./right";
import middle from "./middle";

onMounted(() => {
})
</script>
<style scoped>
.home {
  width: 100vw;
  height: 100vh;
  /* background: red; */
  background-image: url("@/assets/img/u2.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  /* overflow-x: hidden; */
  overflow: hidden;
}

header {
  padding-top: 1.25rem;
  text-align: center;
  color: white;
  font-size: 1.75rem;
  height: 1.875rem;
}

.content {
  margin-top: 1.25rem;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  /* height: 800px; */
  height: calc(100vh - 2.5rem - 1.875rem);
}

/* left {
 border: none
}; */
.content>div {
  /* border: 1px solid red; */
  width: 25%;
  /* height: 800px; */
}

.content>div:nth-child(2) {
  width: 38%;
  /* flex: 1; */
}

.header_img {
  width: 100%;
  height: 1.875rem;
  background-image: url("@/assets/img/u4.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
